import { useRequestHandle } from '@/utils/utils';
import { useUpdateEffect } from '@umijs/hooks';
import { message, Spin, Layout, Menu, Pagination, Card } from 'antd';
import { useEffect, useState } from 'react';
import { query } from './service';
import Edit from './Edit';
import { Empty } from 'antd';


export default function Applications() {

  const [hoveFormValues, setHoveFormValues] = useState({});


  const [pageResult, setPageResult] = useState({
    current: 1,
    items: [],
    itemsPerPage: 15,
    totalItems: 0,
    totalPages: 0,
  });
  const [pageSearch, setPageSearch] = useState({
    current: 1,
    pageSize: 15,
  });
  const [loading, setLoading] = useState(false);

  const getPageRequest = useRequestHandle(query, (data) => {
    setHoveFormValues(data.items[0]);
    setPageResult(data);
  });

  useUpdateEffect(() => {
    getPageRequest.run(pageSearch);
  }, [pageSearch]);

  useEffect(() => {
    async function init() {
      setLoading(true);
      const response = await query({ pageSize: 15, pageIndex: 1 });
      setLoading(false);
      if (response && response.success) {
        if (response.data.items.length > 0) {
          setHoveFormValues(response.data.items[0]);
        }

        setPageResult(response.data);
      } else {
        message.error('获取应用列表失败！');
      }
    }
    init();
  }, []);

  const menuData = pageResult.items.map((item) => {

    return {
      key: item.serverKey,
      label:
        <div>
          {item.serverName}
          <span style={{ float: "right" }}>{item.serverKey}</span>


        </div>,
    }
  })
  return (
    <>
      <Spin spinning={loading || getPageRequest.loading}>

        <Layout style={{ height: "calc( 100vh - 160px )" }}>

          <Layout.Sider style={{ height: "calc( 100vh - 160px )", borderRadius: "8px" }} width={300} theme="light">

            <Menu
              onClick={(e) => {
                setHoveFormValues(pageResult.items.find(item => item.serverKey === e.key));
              }}

              style={{ width: 300, padding: "4px 10px", border: "0" }}
              mode="inline"
              selectedKeys={[hoveFormValues.serverKey]}
              items={[...menuData]}
            />

            {pageResult.totalPages > 1
              ? <Pagination
                style={{
                  margin: "0 auto",
                  borderTop: "1px solid #cacaca30",
                  paddingTop: "10px",
                  textAlign: "center", position: "absolute", bottom: "10px", left: "0", right: "0"
                }}
                simple
                onChange={(page, pageSize) => {
                  setPageSearch({
                    current: page,
                    pageSize,
                  });
                }}
                current={pageResult.current}
                total={pageResult.totalItems} /> : null
            }
          </Layout.Sider>
          <Layout.Content style={{ height: "calc( 100vh - 160px )" }}>
            <Card
              bodyStyle={{ padding: "0 4px" }}
              bordered={false} style={{ marginLeft: "10px", height: "calc( 100vh - 160px )" }}>
              {hoveFormValues.serverKey ?
                <Edit id={hoveFormValues.id} record={hoveFormValues} />
                : <Empty style={{ marginTop: "200px" }} />}

            </Card>
          </Layout.Content>
        </Layout>




      </Spin>
    </>
  );
}
